function $(se) {
    return document.querySelector(se)
}
function $s(se) {
    return document.querySelectorAll(se)
}

// 粒子插件
window.onload = function() {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "121, 162, 185", 	//点颜色
        stroke: "130,255,255", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);
}



//身份证价格js交互
// 动态生成数据
let data = [
    {"times": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"times": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"times": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]


let times1=document.querySelectorAll(".time>.times1")//需要动态生成的三个4000次 8000次 40000次节点
let price=document.querySelector(".money>span")//总价price价格
let unitPrice=document.querySelector(".money>b")//单价unitPrice
let time=document.querySelector(".time")//span父级元素
//console.log(times,price,unitPrice,times1);
//遍历对象数组
data.forEach(function(v,i){
  //创建节点span
  let span=document.createElement("span")
  //添加内容
  span.textContent=v.times+"次"
  //默认激活样式
  if(i==0){
      span.classList.add("active")
  }
  //添加自定义是属性 总价price和单价unitPrice 为后面点击事件做准备
  span.setAttribute("price",v.price)
  span.setAttribute("unitPrice",v.unitPrice)
  //追加在页面
  time.append(span)
})

//上面创建了span这里才能获取节点在上面获取是没有的
let times=document.querySelectorAll(".time>span")//五个span节点//
//console.log(times);
//遍历span添加点击事件
times.forEach(function(value,i){
  //判断索引为0 第一个值不添加类名
  if(i!=0){
      //给span添加点击事件
      value.addEventListener("click",function(){
          //console.log(111);
          //一刀切所有的点击激活样式
          times.forEach(function(v){
              v.classList.remove("active")
          })
          //1.添加类名点击谁就激活样式
          value.classList.add("active")
          //2.添加类名点击谁就激活样式，后面的单价和总价属性也跟着变
          //获取自定义属性
          let price2=value.getAttribute("price")
          let unitPric2=value.getAttribute("unitPrice")
          //console.log(price2,unitPric2);
          //放入到对页面对应的位置
          //获取页面对应位置的节点
          let b1=document.querySelector(".money>b")
          let b2=document.querySelector(".money>span>b")
          //console.log(a,b);
          b1.textContent=price2
          b2.textContent=unitPric2

      })
          
      // console.log(value.textContent);

  }
})
